<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <style type="text/css">
        .header {
            text-align: center;
            padding: 1px;
        }

        .mytitle {
            font-size: 15px;
            font-weight: bold;
            margin: 5px;
        }

        .mydetail {
            border: 1px solid rgb(192, 203, 237);
            margin-left: 20px;
            margin-right: 20px;
            padding-left: 15px;
            padding-right: 10px;
            font-size: 14px;
            text-align: left;
        }

        .mysectitle {
            font-size: 14px;
            font-weight: bold;
            margin: 5px;
        }

        .progress-container {
            position: relative;
            width: 100%;
            height: 40px;
            /* 加宽进度条 */
            background-color: #eee;
            margin: 20px 0;
            display: none;
            border-radius: 5px;
            /* 保持圆角一致 */
        }

        .progress-bar {
            width: 0%;
            height: 100%;
            background-color: #26b941;
            transition: width 0.3s ease;
            border-radius: 5px;
            /* 保持圆角一致 */
        }

        .progress-percent {
            position: absolute;
            left: 50%;
            top: 50%;
            /* 垂直居中调整 */
            transform: translate(-50%, -50%);
            font-size: 25px;
            /* 增大字体 */
            color: #333;
            font-weight: bold;
            z-index: 2;
        }
    </style>

    <script>
        // 更新进度条的函数
        function updateProgressBar(percent) {
            var progressBar = document.getElementById("progressBar");
            progressBar.style.width = percent + "%";
            var progressPercent = document.getElementById("progressPercent");
            progressPercent.textContent = Math.floor(percent) + "%";
        }

        function UploadFile(id) {
            var uploadfiles;
            var upload_ota_path;
            switch (id) {
                case 1:
                    upload_ota_path = "/file/write/";
                    uploadfiles = document.getElementById("UploadDeviceDescribeFile").files;
                    break;
                case 2:
                    upload_ota_path = "/file/write/";
                    uploadfiles = document.getElementById("UploadDeviceListFile").files;
                    break;
                case 3:
                    upload_ota_path = "/file/rule/";
                    uploadfiles = document.getElementById("UploadDeviceRuleFile").files;
                    break;
                case 4:
                    upload_ota_path = "/ota/";
                    uploadfiles = document.getElementById("UploadGetwayFile").files;
                    break;
                default:
                    break;
            }
            upload_ota_path = upload_ota_path + uploadfiles[0].name;

            var res = confirm("升级需要等待一会儿,确定升级吗?");
            if (res) {
                if (uploadfiles.length == 0) {
                    alert("未选择文件");
                } else {
                    var xhr = new XMLHttpRequest();
                    xhr.open("POST", upload_ota_path, true);

                    // 显示进度条容器
                    var progressContainer = document.getElementById("progressContainer");
                    progressContainer.style.display = "block";

                    // 添加上传进度监听
                    xhr.upload.onprogress = function (e) {
                        if (e.lengthComputable) {
                            var percent = (e.loaded / e.total) * 100;
                            // 更新进度条
                            updateProgressBar(percent);
                        }
                    };

                    xhr.send(uploadfiles.item(0));

                    xhr.onreadystatechange = function () {
                        if (xhr.readyState == 4) {
                            // 上传完成后隐藏进度条
                            // alert(xhr.status + " Error!\n" + xhr.responseText);
                            if (xhr.status == 200) {
                                setTimeout(function () {
                                    confirm("升级完成");
                                    // 上传完成后隐藏进度条
                                    progressContainer.style.display = "none";
                                }, 5000); // 5000 毫秒等于 5 秒
                            }
                        }
                    };

                    // xhr.ontimeout = function () {
                    //     // 请求超时（如果设置了超时时间）
                    //     console.error("请求超时");
                    //     alert("请求超时，请检查网络或稍后重试");
                    //     progressContainer.style.display = "none";
                    // };
                    // xhr.timeout = 15000;
                }
            }
        }

        function back_login() {
            window.location.replace("../");
        }

        // 网页加载时获取基本信息
        window.onload = function () {
            var xmlhttp = new XMLHttpRequest();
            xmlhttp.open("GET", "/api/sys/get", true);
            xmlhttp.send();
            xmlhttp.onreadystatechange = function () {
                if (xmlhttp.readyState == 4) {
                    var json = JSON.parse(xmlhttp.responseText);
                    document.getElementById('sn').innerHTML = json.sys.sn;
                    document.getElementById('time').innerHTML = json.sys.time;
                    document.getElementById('sver').innerHTML = json.sys.sver;
                    document.getElementById('hver').innerHTML = json.sys.hver;
                }
            }
        }
    </script>
</head>

<body>
    <div class="header">
        <h3>SMG-ESR网关经典款</h3>
        <div style="border-bottom:2px solid rgb(121, 117, 117)"></div>
    </div>
    <div class="mytitle">基础信息</div>
    <div class="mydetail">
        <table style="width: 100%;">
            <tbody>
                <tr>
                    <td style="width: 35%;">
                        <table style="width:100%;">
                            <tr>
                                <td style="width: 35%;">
                                    网关SN:
                                </td>
                                <td style="width: 65%;">
                                    <label id="sn"></label>
                                </td>
                            </tr>
                            <tr>
                                <td style="width: 35%;">
                                    编译日期:
                                </td>
                                <td style="width: 65%;">
                                    <label id="time"></label>
                                </td>
                            </tr>
                        </table>
                    </td>
                    <td style="width: 30%;">
                        <table style="width:100%;">
                            <tr>
                                <td style="width: 50%;">
                                    硬件版本:
                                </td>
                                <td style="width: 50%;">
                                    <label id="hver"></label>
                                </td>
                            </tr>
                            <tr>
                                <td style="width: 50%;">
                                    软件版本:
                                </td>
                                <td style="width: 50%;">
                                    <label id="sver"></label>
                                </td>
                            </tr>
                        </table>
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
    <div class="mytitle">文件管理</div>
    <div class="mydetail">
        <table style="width: 100%;">
            <tbody>
                <tr>
                    <td style="width: 35%;">网关升级文件:</td>
                    <td style="width: 45%;"><input style="padding-left: 10px;" id="UploadGetwayFile" type="file" />
                    </td>
                    <td style="width: 20%;"><button style="width: 80px;" type="button"
                            onclick="UploadFile(4)">升级</button></td>
                </tr>
            </tbody>
        </table>
    </div>

    <!-- 添加进度条容器 -->
    <div id="progressContainer" class="progress-container">
        <div id="progressBar" class="progress-bar"></div>
        <div id="progressPercent" class="progress-percent">0%</div> <!-- 新增百分比显示 -->
    </div>
</body>

</html>